<template>
  <div class="hello">
    <div>数量 mapState：{{ $store.state.num }}</div>
    <hr />
    <div>商品价格：100</div>
    <div>商品总价 getters：{{ $store.getters.totalPrice }}</div>
  </div>
  <hr />
  <button @click="btn">增加</button>
  <button @click="btn2">增加2</button>
  <hr />
  <button @click="btn3">请求段子</button>
  <p v-for="(item,i) in $store.state.dzlist" :key="i">{{ item.text }}</p>
</template>

<script>
// import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  computed: {},
  methods: {
    btn() {
      this.$store.commit('setNum') // 没有参数 mapMutations
    },
    btn2() {
      this.$store.commit('setNum2', 2) // 有参数  mapMutations
    },
    btn3() {
      this.$store.dispatch('getDZ')
    }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
